<template>
	<view class="box">
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			拉黑管理
		</view>
		<view class="center">
			<view class="center_item" v-for="(item,index) in blockLists" :key="item.id">
				<view class="personalDetails">
					<image class="image" v-if="item.userInfo.image" :src="item.userInfo.image"></image>
					<image class="image" v-else src="https://pic.bangbangtongcheng.com/static/my/header.png"></image>
					<view class="personalDetails_right">
						<view class="name">
							{{item.userInfo.nikeName || '未命名用户'}}
						</view>
						<view class="identity">
							{{item.userInfo.isShop==1?'商家,':""}}{{item.userInfo.isAgent==1?'经纪人':""}}
						</view>
					</view>
				</view>
				<view class="remove" @click="fabuZbc=true,ycId=item.id">
					移除
				</view>
			</view>
			<view v-if="blockLists.length == 0" class="none">
				<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
				<view>没有更多数据了</view>
			</view>
		</view>
		<view class="audit"
			style="width: 100%;height: 100%;position: fixed;background-color: rgba(19, 18, 18, 0.5);z-index: 100;top: 0;"
			@click.self="hideDiv" v-if="fabuZbc">
			<view class="fabuZbc">
				<view class="tips">
					确定要将此人从黑名单移除吗？
				</view>
				<view class="btn">
					<view class="btn_qx" @click="hideDiv">
						取消
					</view>
					<view class="btn_qd" @click="remove()">
						确定
					</view>
				</view>
			</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>
<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				imgUrl: this.$imgSrc,
				userInfo: uni.getStorageSync("Pduser"),
				pageSize:"9999",
				pageNo:'1',
				blockLists:[],
				fabuZbc:false,
				ycId:""
			};
		},
		computed: {
			...mapGetters(["userid", "islogin", "statusBarHeight1", "userinfo"]),
		},
		onLoad() {
			this.blockList()
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		mounted() {},
		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 隐藏输入弹出框
			hideDiv() {
				this.fabuZbc = false
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					},
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"],
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari",
					],
				});
			},
			// 获取拉黑列表
			blockList(){
				this.$myRequest
				.get("/api/mobile/public/getBlackoutManagement", {
					pullBlack:this.userInfo.id,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
				})
				.then(res => {
					this.blockLists=res.blackoutManagementList.pageList
				});
			},
			remove(){
				this.$myRequest
				.post("/api/mobile/public/cancel", {
					pullBlack:this.userInfo.id,
					ids:this.ycId
				})
				.then(res => {
					this.hideDiv()
					uni.showToast({
						title: "移除成功",
						icon: "none",
					});
					setTimeout(()=>{
						this.blockLists=[]
						this.blockList()
					},500)
				});
			}
		},
	};
</script>
<style lang="less" scoped>
	.tou {
		position: relative;
		width: 100%;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}
	}
	.none {
		text-align: center;
	
		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}
	
		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}
	.box {
		height: 100vh;
		background-color: #fff;
	}
	.fabuZbc {
		position: fixed;
		top: 30%;
		left: 50%;
		width: 600rpx;
		height: 300rpx;
		transform: translateX(-50%);
		background-color: #f3efef;
		border-radius: 10rpx;
		.tips{
			margin-top: 80rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 400;
			color: #000000;
		}
		.btn{
			display: flex;
			justify-content: space-between;
			margin: 0 110rpx;
			margin-top: 60rpx;
			.btn_qx{
				width: 160rpx;
				height: 60rpx;
				border-radius: 37rpx;
				border: 1px solid #64B6A8;
				font-size: 30rpx;
				font-weight: 400;
				color: #64B6A8;
				text-align: center;
				line-height: 60rpx;
			}
			.btn_qd{
				width: 160rpx;
				height: 60rpx;
				background-color: #64B6A8;
				border-radius: 37rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
	.center{
		margin:10rpx 30rpx;
		.center_item{
			height: 160rpx;
			border-bottom: 1px solid #ccc;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.personalDetails{
				display: flex;
				align-items: center;
				.image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
				}
				.personalDetails_right{
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 25rpx;
					.name{
						font-size: 36rpx;
						font-weight: 600;
						color: #333333;
						margin-bottom: 10rpx;
					}
					.identity{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.remove{
				width: 150rpx;
				height: 57rpx;
				background-color: #64B6A8;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 57rpx;
				margin-right: 16rpx;
			}
		}
	}
</style>
